<template>
  <div class="card-container">
    <div class="card" v-for="(item,index) in postList" :key="index">
      <div>
        <router-link :to="{path:'/cardinfo/'+item.postsId}">
          <!-- 帖子标题 -->
          <p class="card-title">{{item.title}}</p>
          <!-- 帖子介绍 -->
          <p class="card-intro">{{item.intro}}</p>
        </router-link>

        <!-- 点赞收藏 -->
        <van-icon name="like-o" size="16" class="myHeart" @click="toggle" v-if="!flag" />
        <van-icon
          name="like"
          size="16"
          class="myHeart"
          @click="collection"
          color="#ff0000"
          v-if="flag"
        />
        <div class="author-intro">
          <!-- 头像 作者 -->
          <img class="avatar" :src="item.avatar" alt />
          <span class="author">{{item.userName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { postArticle } from "../../api/forum-api.js";
export default {
  data() {
    return {
      flag: false,
      postList: []
    };
  },
  created() {
    postArticle().then(res => {
      //console.log(res.rows);
      this.postList = res.rows;
      console.log(this.postList);
    });
  },
  methods: {
    toggle(flag) {
      if (flag) {
        setTimeout(() => {
          this.$notify({ type: "success", message: "收藏成功" });
          this.$toast("收藏成功");
          this.flag = true;
        }, 500);
      }
    },
    collection(flag) {
      this.$dialog
        .alert({ message: "您确认要取消收藏吗？" })
        .then(() => {
          setTimeout(() => {
            this.flag = !this.flag;
          }, 500);
        })
        .catch(() => {
          this.flag = this.flag;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.card-container{
  margin-bottom: 50px;
}
/* 我的发布卡片样式 */
* {
  padding: 0;
  margin: 0;
}
.box {
  margin-top: 20px;
  margin-bottom: 50px;
  margin-left: 5%;
}
.card {
  width: 90%;
  height: 80px;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px;
  position: relative;
  margin: 10px auto;
  //margin-bottom: 50px;
  .myHeart {
    position: absolute;
    bottom: 10px;
  }
  .author-intro {
    width: 30%;
    position: absolute;
    right: 0;
    bottom: 5px;
    .avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-top: 5px;
    }
    .author {
      font-size: 12px;
    }
  }
  .card-title {
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
    color: black;
  }
  .card-intro {
    margin-top: 10px;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: gray;
  }
}
</style>